/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20230915
* @version:0.1.3
* @type:interface
* @description:
* # SBadge
* SBadge is a quick way to display user status or events
* ## properties inherits SCard
* -  in property <Position> position : badge position of the main component
* -  in-out property <image> icon : badge icon;
* -  in property <brush> icon-color : badge icon color;
* -  in-out property <string> text : text of the badge;
* ## functions
* - pure public function get-x(p_right:length)->length 👍
* - pure public function get-y(p_bottom:length)->length 👍
* ## callbacks
* ============================================
*/
import { SCard } from "../card/index.slint";
import { ROOT_STYLES,DefaultSBadgeProps} from "../../themes/index.slint";
import { SIcon } from "../icon/index.slint";
import { SText } from "../text/index.slint";
import { Themes,ResultType,BorderType,UseSurrealismFn,UseIcons,Position,PaddingType } from "../../use/index.slint";

export component Badge inherits SCard { 
  theme: DefaultSBadgeProps.theme;
  card-height: DefaultSBadgeProps.card-height;
  card-width: DefaultSBadgeProps.card-width;
  border-radius: self.height / 2;
  border-type: BorderType.None;
  padding-type: PaddingType.None;
  //remove all shadow
  drop-shadow-blur: 0;
  drop-shadow-offset-x: 0;
  drop-shadow-offset-y: 0;
  font-color<=>badge-txt.color;
  font-size: DefaultSBadgeProps.font-size;
  font-weight: DefaultSBadgeProps.font-weight;
  font-italic: DefaultSBadgeProps.font-italic;
  font-family: DefaultSBadgeProps.font-family;
  in property <Position> position : DefaultSBadgeProps.position;
  in-out property <image> icon : DefaultSBadgeProps.icon;
  in-out property <brush> icon-color <=> badge-icon.colorize;
  in-out property <string> text : DefaultSBadgeProps.text;
  clip: false;
  pure public function get-x(p_right:length)->length {
      if((self.position == Position.LeftTop)||(self.position == Position.Left)||(self.position == Position.LeftBottom)){
        0px
      }else if((self.position == Position.TopLeft)||(self.position == Position.BottomLeft)){
        0px
      }else if((self.position == Position.RightTop)||(self.position == Position.RightBottom)||(self.position == Position.Right)){
        p_right - self.width
      }else{
        p_right - self.width
      }
  }
  pure public function get-y(p_bottom:length)->length {
    if((self.position == Position.LeftTop)||(self.position == Position.RightTop)||(self.position == Position.Top)||(self.position == Position.TopLeft)||(self.position == Position.TopRight)){
      0px
    }else if((self.position == Position.LeftBottom)||(self.position == Position.Bottom)||(self.position == Position.BottomLeft)||(self.position == Position.BottomRight)||(self.position == Position.RightBottom)){
      p_bottom - self.height
    }else{
      p_bottom - self.height
    }
  }
  
  HorizontalLayout {
    spacing: 6px;
    badge-icon:= SIcon {
      colorize: self.get-colorize();
      theme: root.theme;
      height: root.height;
      width: root.width; 
      source: root.icon;
      clicked => {
        txt-view.visible=!txt-view.visible
      }
    }
    txt-view:=SCard {
      visible: false;
      theme: root.theme;
      height: root.height;
      card-width: badge-txt.width;
      padding-type: PaddingType.Small;
      border-type: BorderType.None;
      border-radius: self.height / 2;
      badge-txt:=SText { 
        text: root.text;
        theme: root.theme;
        font-family: root.font-family;
        font-size: root.font-size;
        font-weight: root.font-weight;
        font-italic: root.font-italic;
      }
    }
  }
}